The weeb for the next gen discord boat - Wamellow
wamellow.com
bot
discord
1import { Footer } from "@/components/footer";
2import { LinkButton } from "@/components/ui/button";
3import { Separator } from "@/components/ui/separator";
4import metadata from "@/public/docs/meta.json";
5import { getBaseUrl, getCanonicalUrl } from "@/utils/urls";
6import type { Metadata } from "next";
7import Link from "next/link";
8import { BsDiscord, BsGithub } from "react-icons/bs";
9import { HiUserAdd, HiViewGridAdd } from "react-icons/hi";
10
11interface Props {
12 params: Promise<{ pathname: string[]; }>;
13 children: React.ReactNode;
14}
15
16export const generateMetadata = async ({ params }: Props): Promise<Metadata> => {
17 const { pathname } = await params;
18 const meta = metadata.pages.find((page) => page.file === `${pathname.join("/").toLowerCase()}.md`);
19
20 const title = meta?.file === "index.md"
21 ? "Documentation"
22 : `${meta?.name} docs`;
23
24 const url = getCanonicalUrl("docs", ...pathname);
25 const images = {
26 url: meta?.image || `${getBaseUrl()}/waya-v3.webp?v=2`,
27 alt: meta?.description,
28 heigth: 1_008,
29 width: 1_935
30 };
31
32 return {
33 title,
34 description: meta?.description,
35 alternates: {
36 canonical: url
37 },
38 openGraph: {
39 title,
40 description: meta?.description,
41 url,
42 type: "article",
43 images
44 },
45 twitter: {
46 card: "summary_large_image",
47 title,
48 description: meta?.description,
49 images
50 }
51 };
52};
53
54export default async function RootLayout({ params, children }: Props) {
55 const { pathname } = await params;
56 const meta = metadata.pages.find((page) => page.file === `${pathname.join("/").toLowerCase()}.md`);
57
58 const title = meta?.file === "index.md"
59 ? "Wamellow"
60 : meta?.name;
61
62 return (
63 <div className="w-full">
64
65 <h1 className="text-2xl font-medium text-neutral-100 mb-1">
66 {title} Documentation
67 </h1>
68 <div>
69 {meta?.description}
70 </div>
71
72 <div className="flex flex-col lg:flex-row gap-6 mt-5 min-h-[63vh]">
73 <nav className="w-full lg:w-1/4 space-y-2">
74
75 <ul className="space-y-1 mb-4 bg-wamellow p-2 rounded-md border border-wamellow-alpha">
76 {metadata.pages.map((page, i) =>
77 <NavButton
78 key={"nav-" + page.file + i}
79 page={page}
80 />
81 )}
82 </ul>
83
84 <LinkButton
85 className="w-full justify-start!"
86 href="/support"
87 target="_blank"
88 variant="blurple"
89 >
90 <BsDiscord />
91 Join Support
92 </LinkButton>
93 <LinkButton
94 className="w-full justify-start!"
95 href="/invite"
96 target="_blank"
97 variant="secondary"
98 >
99 <HiUserAdd />
100 Invite Wamellow
101 </LinkButton>
102 <LinkButton
103 className="w-full justify-start!"
104 href="/profile"
105 target="_blank"
106 >
107 <HiViewGridAdd />
108 Dashboard
109 </LinkButton>
110 <Link
111 className="flex items-center gap-1.5 hover:text-violet-400 duration-100"
112 href={"https://github.com/shi-gg/mellow-web/blob/master/public/docs"}
113 target="_blank"
114 >
115 <BsGithub /> Contribute
116 </Link>
117 </nav>
118
119 <Separator className="lg:hidden" />
120
121 {children}
122 </div>
123
124 <Footer className="mt-24" />
125 </div>
126 );
127}
128
129function NavButton({
130 page
131}: {
132 page: typeof metadata.pages[0];
133}) {
134 const file = page.file.replace(/\.md$/, "");
135 const icon = page.name.split(" ").shift() || "";
136 const name = page.name.replace(icon, "");
137
138 return (
139 <li>
140 <LinkButton
141 className="w-full justify-start! bg-transparent h-[30px]"
142 href={`/docs/${file}`}
143 size="sm"
144 >
145 <span className="mr-[2px]">
146 {icon}
147 </span>
148 {name}
149 </LinkButton>
150 </li>
151 );
152}